<template>
  <div class="myMessage">
    <top-bar :title="'我的消息'"/>
    <!-- <div class="content"> -->
    <scroll :data="msgList" action="getMsgList">
      <div slot="scrollInner" class="newslist" ref="barparent">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <div class="content-items" v-for="(item, index) in msgList.list" :key="`msgList${index}`">
              <div class="info">
                <span>{{ item.title }}</span>
                <div v-if="item.status != 2"></div>
              </div>
              <!-- 内容信息 -->
              <div class="content-text" @click="develop(item)">
                <div class="text">
                  <span style="white-space:pre-wrap;line-height: 1.3"
                        :class="[item.currentStatus ? 'spansTrue' : 'spansFalse']">{{
                      item.content.replace(/<[^>]*>|/g, '')
                    }}</span>
                  <img v-if="moldedbreadth(item.content.replace(/<[^>]*>|/g,''),item.currentStatus)"
                       src="@/assets/images/personal_center/develop.png" alt="">
                </div>
              </div>
              <!-- 通知、日期 -->
              <div class="notice">
                <span class="type">{{ type(item.type) }}</span>
                <span class="date">{{ dateTransform(item.create_time, 'MM月dd日') }}</span>
              </div>
            </div>
          </van-list>
        </van-pull-refresh>
      </div>
    </scroll>
    <!-- </div> -->
  </div>
</template>

<script>
import topBar from './topBar'

export default {
  name: 'myMessage',
  components: {
    topBar
  },
  data () {
    return {
      parentClientWidth: null,
      state: true,
      loading: false,
      finished: false,
      refreshing: false,
      page: 1
    }
  },
  computed: {
    moldedbreadth (val, is) {
      return function (val, is) {
        let span = document.createElement('span')
        span.style.fontSize = '12px'
        span.style.visibility = 'hidden'
        span.style.display = 'inline-block'
        document.body.appendChild(span)
        span.textContent = val
        let spanwidth = window.getComputedStyle(span).width.split('p')
        span.remove()
        return spanwidth[0] > this.parentClientWidth && is ? true : false
      }
    },
    msgList () {
      for (let i of this.$store.state.msgList.list) {
        i.currentStatus = true
      }
      return this.$store.state.msgList
    },
    type (val) {
      return function (val) {
        if (val == 1) {
          return '活动消息'
        } else if (val == 2) {
          return '系统消息'
        } else if (val == 3) {
          return '卡券消息'
        }
      }
    }
  },
  mounted () {
    this.$nextTick(function () {
      this.parentClientWidth = this.$refs.barparent.offsetWidth
    }, 500)
  },
  created () {
    if (!this.msgList.count) {
      this.$store.dispatch('getMsgList')
    }
  },
  methods: {
    develop (data) {
      data.currentStatus = !data.currentStatus
      this.$forceUpdate()
    },
    onLoad () {
      setTimeout(() => {
        if (this.refreshing) {
          this.refreshing = false
        }
        this.page++
        let obj = {
          page: this.page,
          offset: 10
        }
        this.$store.dispatch('getMsgList', obj)
        this.loading = false
        if (this.msgList.list.length >= this.msgList.count) {
          this.finished = true
        }
      }, 1000)
    },
    onRefresh () {
      // 清空列表数据
      this.finished = false
      this.loading = true
      this.onLoad()
    }
  },
}
</script>

<style lang="scss" scoped>
.myMessage {
  padding: 0.75rem 0.48rem;

  .newslist, .content {
    margin-top: 0.8rem;
    height: 8rem;
    overflow: scroll;

    .content-items {
      width: 100%;
      // height: 3.15rem;
      background: rgba(255, 255, 255, 0.6);
      border-radius: 0.32rem;
      padding: 0.45rem;
      margin-bottom: 0.3rem;

      .info {
        display: flex;
        align-items: center;
        margin-top: 0.3rem;

        > span {
          font-size: 0.32rem;
          font-family: SourceHanSansCN-Bold, SourceHanSansCN;
          font-weight: bold;
          color: #181818;
          word-break: break-all;
          flex: 1;
        }

        > div {
          width: 0.27rem;
          height: 0.27rem;
          background: #FF0300;
          border-radius: 50%;
        }
      }

      .content-text {
        margin-top: 0.55rem;

        .text {
          display: flex;
          align-items: flex-end;
          font-size: 0.32rem;
          font-family: SourceHanSansCN-Regular, SourceHanSansCN;
          font-weight: 400;
          color: #181818;

          .spansTrue {
            -webkit-line-clamp: 2;
            -moz-line-clamp: 2;
          }

          .spansFalse {
            word-wrap: normal;
            white-space: normal;
            word-break: break-all;
          }

          > img {
            width: 0.24rem;
            height: 0.16rem;
          }
        }
      }

      .notice {
        display: flex;
        align-items: center;
        font-size: 0.32rem;
        color: #999999;
        font-family: SourceHanSansCN-Regular, SourceHanSansCN;
        font-weight: 400;
        margin-top: 0.45rem;

        .type {
          flex: 1;
        }
      }
    }
  }

  /deep/ .van-list__finished-text, /deep/ .van-loading__text {
    font-size: 0.32rem;
    text-align: center;
    color: #999999;
  }
}
</style>
